<template>
  <t-dialog
    v-model:visible="show"
    :width="500"
    :header="plugin.t('components.tax')"
    destroyOnClose
    :footer="false"
    :closeOnOverlayClick="false"
  >
    <template #body>
      <t-table
        row-key="id"
        table-layout="auto"
        :data="taxStore.getList()"
        :columns="columns"
        @rowClick="onPost"
        hover
      >
        <template #name="{ row }">
          <b>{{ row.name }}</b>
        </template>
        <template #iva="{ row }">
          {{ row.iva }}%
        </template>
        <template #req="{ row }">
          {{ row.req }}%
        </template>
      </t-table>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../index'
  import taxStore from '../store/tax'

  const plugin = index.plugin
  const show = ref(false)
  const emit = defineEmits(['post'])
  const columns = [{
    title: plugin.t('tax.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('tax.iva'),
    colKey: 'iva',
    align: 'center',
    cell: 'iva'
  }, {
    title: plugin.t('tax.req'),
    colKey: 'req',
    align: 'center',
    cell: 'req'
  }]

  const open = () => {
    show.value = true
  }

  const onPost = ({ row }) => {
    show.value = false
    emit('post', row)
  }

  defineExpose({ open })
</script> 